import { util } from '@/utils'
import AMapLoader from '@amap/amap-jsapi-loader'
import { useEffect } from 'react'

function AMap(props: any) {
  const setting = util.Setting.getSetting()
  if (!setting.amapKey) {
    return <div>未配置高德地图key</div>
  }

  let map: any = null
  const config = {
    key: setting.amapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }
  const coord = [props.lng, props.lat] // 北京中心点坐标: [116.46, 39.92]

  // 2.dom渲染成功后进行map对象的创建
  useEffect(() => {
    ;(window as any)._AMapSecurityConfig = {
      securityJsCode: setting.amapKey,
    }
    function initMap(AMap: any) {
      map = new AMap.Map(props.id, {
        //设置地图容器id
        viewMode: '3D', //是否为3D地图模式
        zoom: 10, //初始化地图级别
        center: coord, //初始化地图中心点位置
      })
    }
    AMapLoader.load(config)
      .then(initMap)
      .catch(e => console.log(e))

    return () => {
      map?.destroy()
    }
  }, coord)
  // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
  return <div id={props.id} style={{ width: '285px', height: '160px' }}></div>
}
//导出地图组建类
export default AMap
